<template>
  <div>


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>美多商城-注册</title>

    </head>
    <body>
    <div class="register_con">
      <div class="l_con fl">
        <a href="index.html" class="reg_logo"><img src="@static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="login.html">登录</a>
        </div>
        <div class="reg_form clearfix">
          <form method="post" class="register_form" @submit.prevent="add_user">
            <ul>
              <li>
                <label>用户名:</label>
                <input type="text" name="user_name" id="user_name" v-model="form.username" @blur="checkusername">
                <span class="error_tip">{{ error.username }}</span>
              </li>
              <li>
                <label>密码:</label>
                <input type="password" name="pwd" id="pwd" v-model="form.password" @blur="checkpassword">
                <span class="error_tip">{{ error.password }}</span>
              </li>
              <li>
                <label>确认密码:</label>
                <input type="password" name="cpwd" id="cpwd" v-model="form.password1" @mouseout="checkpassword1">
                <span class="error_tip">{{ error.password1 }}</span>
              </li>
              <li>
                <label>手机号:</label>
                <input type="text" name="phone" id="phone" v-model="form.mobile" @blur="checkmobile">
                <span class="error_tip">{{ error.mobile }}</span>
              </li>
              <li>
                <label>图形验证码:</label>
                <input type="text" name="pic_code" id="pic_code" class="msg_input" v-model="imgcode">
                <img :src="imageurl" alt="图形验证码" class="pic_code" @click="get_img" title="看不清？换一张">
                <span class="error_tip">请填写图形验证码</span>
              </li>
              <li>
                <label>短信验证码:</label>
                <input type="text" name="msg_code" id="msg_code" class="msg_input" v-model="form.codes"
                       @blur="checkcodes">
                <!--                <a href="javascript:;" class="get_msg_code">获取短信验证码</a>-->
                <button @click.prevent="get_note" :disabled="flag">{{ mes }}</button>
                <span class="error_tip">{{ error.codes }}</span>
              </li>
              <li class="agreement">
                <input type="checkbox" name="allow" id="allow" checked="checked" v-model="form.is_check">
                <label>同意”美多商城用户使用协议“</label>
                <span class="error_tip">请勾选用户协议</span>
              </li>
              <li class="reg_sub">
                <input type="submit" value="注 册">
              </li>
            </ul>
          </form>
        </div>

      </div>

    </div>

    <div class="footer no-mp">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>

    </body>
    </html>

  </div>
</template>

<script>
import '@static/css/reset.css'
import '@static/css/main.css'
import {v4 as uuid4} from 'uuid'

export default {
  name: "regi",
  data() {
    return {
      form: {'is_check': false},
      error: {username: '请输入5-10位账号', mobile: '请输入手机号', password: '请输入8-20位密码', password1: '再次输入密码', codes: '请填写短信验证码'},
      mes: '获取短信验证码',
      flag: false,
      time: 60,
      uid: '',
      imageurl: '',
      imgcode: '',

    }
  },
  methods: {
    checkusername() {
      let name = this.form.username
      //1是否为空
      if (name == undefined || name == '' || name == null) {
        this.error.username = '账号不能为空'
        return false
      }
      //2是否符合格式
      let reg = /\w{5,10}$/
      if (!reg.test(name)) {
        this.error.username = '请输入正确的账号'
        return false
      }
      //3是否唯一
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 20010) {
            this.error.username = '账号不能为空'
            return false
          }
          if (res.data.code == 20011) {
            this.error.username = '请输入正确的账号'
            return false
          }
          if (res.data.code == 20012) {
            this.error.username = '账号已存在'
            return false
          }
          this.error.username = ''


        })

    },
    checkmobile() {
      let mobile = this.form.mobile
      if (mobile == undefined || mobile == '' || mobile == null) {
        this.error.mobile = '手机号不能为空'
        return false
      }
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(mobile)) {
        this.error.mobile = '请输入正确的手机号'
        return false
      }
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 20013) {
            this.error.mobile = '手机号不能为空'
            return false
          }
          if (res.data.code == 20014) {
            this.error.mobile = '请输入正确的手机号'
            return false
          }

          this.error.mobile = ''

        })

    },
    checkpassword() {
      let password = this.form.password
      if (password == undefined || password == null || password == "") {
        this.error.password = '密码不能为空'
        return false
      }
      let re = /\w{8,20}$/
      if (!re.test(password)) {
        this.error.password = '密码格式不正确'
        return false
      }
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 10010) {
            this.error.password = '密码不能为空'
            return false
          }
          if (res.data.code == 10011) {
            this.error.password = '密码格式不正确'
            return false
          }
          this.error.password = ''

        })


    },
    checkpassword1() {
      if (this.form.password == this.form.password1) {
        this.error.password1 = ''
      } else {
        this.error.password1 = '两次输入密码不一致'
      }


    },
    get_note() {
      this.$axios.post('note/', {'mobile': this.form.mobile, 'imgcode': this.imgcode, 'uid': this.uid})
        .then(res => {
          if (res.data.code == 200) {
            let jy = setInterval(() => {
              //时间减1
              this.time--
              //文字改变
              this.mes = this.time + '以后操作'
              //按钮实效
              this.flag = true
              if (this.time == 0) {
                clearInterval(jy)
                this.time = 60
                this.flag = false
                this.mes = '获取短信验证码'
              }

            }, 1000)
          } else if (res.data.code == 20013) {
            alert('手机号不能为空')
          } else if (res.data.code == 20014) {
            alert('手机号错误')
          }


        })
    },
    checkcodes() {
      this.$axios.post('regi/', this.form)
        .then(res => {
          if (res.data.code == 10016) {
            this.error.codes = '验证码错误'
            return false
          }
          if (res.data.code == 200) {
            this.error.codes = ''
          }

        })
    },
    get_img() {
      this.uid = uuid4()
      this.imageurl = 'http://127.0.0.1:8000/createPic/?uuid=' + this.uid
    },

    add_user() {
      if (this.form.is_check == true) {
        this.$axios.post('regi1/', this.form)
          .then(res => {
            if (res.data.code == 200) {
              alert('注册成功')
            } else {
              alert('注册失败')
            }
          })
      } else {
        alert('请点击同意再登录')
      }

    }
  },
  mounted() {
    this.get_img()
  }
}
</script>

<style scoped>

</style>
